<template>
  <div class="container">
      <div class="hot-top">
    <div class="hot-bat">
       <div class="space"></div>
        <div class="tit">热卖榜单</div>
    </div>
    <div class="more">
        <p>查看更多</p>
        <span class="iconfont">&#xe679;</span>
    </div>
    </div>
    <div class="images">
        <div class="lt-lb">
            <img :src="lt.img" />
            <img :src="lb.img" />
        </div>
        <div class="rt-rb">
            <img :src="rt.img" />
            <img :src="rb.img" />
        </div>
        <div></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'hot-list',
  props: {
    data: Array,
    lt: {},
    lb: {},
    rt: {},
    rb: {}
  },
  watch: {
    data: function (value) {
      this.lt = value.find(i => { return i.name === 'lt' })
      this.lb = value.find(i => { return i.name === 'lb' })
      this.rt = value.find(i => { return i.name === 'rt' })
      this.rb = value.find(i => { return i.name === 'rb' })
    }
  }
}
</script>

<style lang="scss" scoped>
   .hot-top{
       width: 100%;
       height: 1.5rem;
       display: flex;
       text-decoration: column;
       justify-content: space-between;
       align-items: center;
       padding: .1rem .3rem;
       box-sizing: border-box;
       .hot-bat{
               display: flex;
               justify-content: center;
               align-items: center;
           .space{
               width: .06rem;
               height: .3rem;
               background-color: #FF9341;
           }
           .tit{
               font-size: .34rem;
               margin-left: .1rem;
           }
       }
    .more{
        display: flex;
        justify-content: center;
        align-items: center;
        p{
           margin-right: .1rem;
           font-size: .26rem;
        }
        span{

        }
    }
   }
   .images{
       width: 100%;
       height: 4.04rem;
       display: flex;
       justify-content: space-between;
       .lt-lb{
           img{
               width: 3.08rem;
              height: 2.02rem;
           }
       }
       .rt-rb{
           img{
               width: 4.4rem;
               height: 2.02rem;
           }
       }
   }
</style>
